<template>
	<div>
		<!--打开字典项详情-->
		<a-drawer
			:title="formInfo.title"
			:width="630"
			@close="onClose"
			:visible="formInfo.visible"
			wrapClassName="mydrawer"
			:wrapStyle="{ overflow: 'auto', paddingBottom: '108px' }"
		>
			<div class="table-operator" style="border-top: 5px" v-if="$_has('sys:item:insert')"><a-button type="primary" @click="handleAdd()">新增</a-button></div>
			<div class="table-content">
				<s-table :bordered="false" :showPagination="true"  :columns="itemcolumns" :data="loadDataItem" size="middle" rowKey="itemId" ref="table" :rowSelection="rowSelection">
					<span class="tag" :class="{ active: text == 1 }" slot="status" slot-scope="text">{{ text | fitlerStatus }}</span>
					<span class="operation" slot="action" slot-scope="key, record">
						<a href="javascript:;" title="编辑" class="edit"  v-has="'sys:dict:update'" @click="handleAdd(record)">编辑</a>
						<a href="javascript:;" title="删除" class="del"  v-has="'sys:dict:delete'"  @click="showConfirmItem(record.itemId)">删除</a>
					</span>
				</s-table>
			</div>

			<div
				:style="{
					position: 'absolute',
					left: 0,
					bottom: '0',
					width: '100%',
					borderTop: '1px solid #e9e9e9',
					padding: '10px 16px',
					background: '#fff',
					textAlign: 'center'
				}"
			>
				<!-- <a-button :style="{marginRight: '8px'}" @click="onClose" type="primary">保存</a-button> -->
				<a-button @click="onClose">取消</a-button>
			</div>
		</a-drawer>
		<!--添加字典数据项-->
		<add-or-edit-dict-item-modal editKey="itemId" modalTitle="数据字典小项" ref="dictItemModal" @ok="handlerRefresh"></add-or-edit-dict-item-modal>
	</div>
</template>

<script>
import { sysManageapi, postAction } from '@/api/index.js';
import QS from 'qs';
import addOrEditDictItemModal from '../addOrEditDictItemModal';
import { STATUSENUM } from '@/utils/enumeration';
const itemcolumns = [
	{
		title: '名称',
		align: 'left',
		dataIndex: 'itemName',
		ellipsis: true,
	},
	{
		title: '编号',
		align: 'left',
		dataIndex: 'itemCode',
		ellipsis: true
	},
	{
		title: '状态',
		align: 'left',
		dataIndex: 'status',
		scopedSlots: {
			customRender: 'status'
		}
	},
	{
		title: '操作',
		dataIndex: 'action',
		width: '150px',
		align: 'center',
		scopedSlots: {
			customRender: 'action'
		}
	}
];

export default {
	components: {
		addOrEditDictItemModal
	},
	data() {
		return {
			//字典明细滑出框表单数据
			formInfo: {
				description: '',
				title: '字典列表',
				visible: false, //字典明细滑出框默认不显示
				dictId: '',
				dictCode: ''
			},
			//字典项表头
			itemcolumns,
			showPagination: true,
			// 加载数据方法 必须为 Promise 对象(字典)
			loadDataItem: parameter => {
				return postAction(sysManageapi.dictUrl.getItemList, Object.assign(parameter, { dictId: this.formInfo.dictId })).then(res => {
					return res.data;
				});
			},
			rowSelection: null
		};
	},
	props: {
		datalist: {
			type: String,
			default: null
		}
	},
	methods: {
		show(record) {
			this.formInfo.dictId = record.dictId;
			this.formInfo.dictCode = record.dictCode;
			this.formInfo.visible = true;
			this.$nextTick(() => {
				this.handlerRefresh();
			});
		},
		//打开添加字典项
		handleAdd(item) {
			this.$refs.dictItemModal[!item ? 'add' : 'edit'](
				Object.assign({}, item, {
					dictId: this.formInfo.dictId,
					dictCode: this.formInfo.dictCode
				})
			);
		},
		//确定提交(新增或编辑字典数据项)
		handlerRefresh() {
			this.$refs.table.refresh();
		},
		showConfirmItem(id) {
			var $me = this;
			$me.$confirm({
				title: '您确定要删除吗?',
				onOk() {
					$me.$postAction(sysManageapi.dictUrl.deleteItem, [id])
						.then(res => {
							if (res.code == 1) {
								setTimeout(() => {
									$me.$message.success('删除字典数据项成功!');
									$me.$refs.table.refresh();
								}, 1000);
							}
						})
						.catch(err => {});
				},
				onCancel() {}
			});
		},

		//关闭(打开字典项滑出框)
		onClose() {
			this.formInfo.visible = false;
		}
	},
	filters: {
		fitlerStatus(val) {
			return STATUSENUM[val];
		}
	}
};
</script>

<style scoped="scoped" lang="less">
/deep/ .table-wrapper .operation {
	line-height: 1;

	a {
		&.del {
			// color: @warning-color;
		}
		& + a {
			margin-left: 10px;
		}
	}
}
.table-content{
	overflow: auto;
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 80px;
	top: 125px;
}
/deep/ .ant-table .ant-table-row:nth-child(even) td {
	background: #f4f5f8;
}
/deep/ .ant-table .ant-table-row td,
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-placeholder{
	border: none;
}
.tag {
	width: 52px;
	height: 24px;
	// border: 1px solid @primary-color;
	// color: @primary-color;
	border-radius: 4px;
	display: inline-block;
	text-align: center;
	&.active {
		// border: 1px solid @warning-color;
		// color: @warning-color;
	}
}

</style>
